<template>
    <div class="form">
        <i-form inline text-left ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="5">
            <Row>   
                <col span="24">
                    <Form-item label="" prop="serialNo">
                         <!-- @keyup.enter.native.stop.prevent="search" -->
                        <i-input v-model="formValidate.serialNo" placeholder="工单号" @keyup.enter.native.stop.prevent="search"></i-input>
                    </Form-item>
                    <FormItem label="" prop="baseLevel" style="width:120px" >
                        <i-select v-model="formValidate.baseLevel" placeholder="问题大类" @on-change="search">
                            <i-option v-for="item in mainQUestionList" v-bind:value="item" v-bind:key="item">{{item}}</i-option>
                        </i-select>
                        <!-- <baseLevel :style="'width:150px'" v-on:getBaseLevel="getBaseLevel"></baseLevel> -->
                    </FormItem>
                    <Form-item label="" prop="levelOne" >
                        <i-select v-model="formValidate.levelOne" :label-in-value="true" placeholder="一级分类" @on-change="changeLevelOne" style="width:200px" >
                            <i-option v-for="item in one_list" :value="item.value" v-bind:key="item.value">{{item.label}}</i-option>
                        </i-select>
                        <!-- <levelOne v-on:getLevelOne="getLevelOne"></levelOne> -->
                    </Form-item>
                    <Form-item label="" prop="levelTwo">
                        <i-select v-model="formValidate.levelTwo" :label-in-value="true" placeholder="二级分类" @on-change="changeLevelTwo" style="width:200px">
                            <i-option v-for="val in two_list" :value="val.value" v-bind:key="val.value">{{val.label}}</i-option>
                        </i-select>
                        <!-- <levelTwo v-on:getLevelTwo="getLevelTwo"></levelTwo> -->
                    </Form-item>
                    <Form-item label="" prop="levelThree" style="width:200px">
                        <i-select v-model="formValidate.levelThree" :label-in-value="true" @on-change="changeLevelThree" placeholder="三级分类">
                            <i-option v-for="item in three_list" :value="item.value" v-bind:key="item.value">{{item.label}}</i-option>
                        </i-select>
                    </Form-item>
                </col>
            </Row>
            <Row> 
                <col span="24">
                    <Form-item label="" prop="regTelNum">
                        <i-input v-model="formValidate.regTelNum" placeholder="注册手机号" @keyup.enter.native.stop.prevent="search"></i-input>
                    </Form-item>
                    <Form-item label="" prop="stuID">
                        <i-input v-model="formValidate.stuId" placeholder="学生编号" @keyup.enter.native.stop.prevent="search"></i-input>
                    </Form-item>
                    <Form-item label="" prop="creatorName">
                        <i-input v-model="formValidate.creatorName" placeholder="创建人" @keyup.enter.native.stop.prevent="search"></i-input>
                    </Form-item>
                    <Form-item label="" prop="creatorId">
                        <i-input v-model="formValidate.creatorId" placeholder="工号" @keyup.enter.native.stop.prevent="search"></i-input>
                    </Form-item>  
                    <Form-item label="" prop="status">
                        <i-select v-model="formValidate.status" placeholder="工单状态" @on-change="search" style="width:120px">
                            <i-option v-for="item in selectStatus" :value="item.value" v-bind:key="item.value">{{item.label}}</i-option>
                        </i-select>
                    </Form-item>
                    
                    <Form-item label="" prop="resolveCount">
                        <i-select v-model="formValidate.resolveCount" placeholder="处理次数" @on-change="search" style="width:120px">
                            <i-option v-for="item in selectResolveCount" :value="item.value" v-bind:key="item.value">{{item.label}}</i-option>
                        </i-select>
                    </Form-item>
                    <Form-item label="">
                        <Row>
                            <i-col span="11">
                                <Form-item prop="createTime">
                                    <Date-picker type="datetimerange" format="yyyy-MM-dd HH:mm" v-model="formValidate.createTime" placeholder="选择开始时间至结束时间" style="width: 300px" @keyup.enter.native.stop.prevent="search"></Date-picker>
                                </Form-item>
                            </i-col>
                        </Row>
                    </Form-item>
                    <Form-item>
                        <i-button type="success" class="searchBtnColor" @click="search">搜索</i-button>
                        <i-button type="success"  @click="handleReset('formValidate')">重置</i-button>
                    </Form-item>
                </col>
            </Row>
        </i-form>
        <!-- @on-row-click="goTaskDetail" -->
        <i-table :loading="loading" :row-class-name="rowClassName" :columns="workOrdercolumns1" :data="taskUntreatedListData" @on-selection-change="selectChange"></i-table>
        <Row>
            <i-col span="24" align="center">
                <!-- @on-change="changepage" -->
                <Page :total="totalElements" :page-size="pageSize" :page-size-opts="opts"  @on-change="changepage" size="small" show-total show-elevator show-sizer  style="margin-top: 20px;"></Page>
            </i-col>
        </Row>
    </div>
</template>
<script>
    import {
        mapGetters
    } from 'vuex'
    import {
        formatDate,
    } from '@/libs/filter.js'
    import taskService from 'service/taskService.js'
    import configService from 'service/configService.js'
    import baseLevel from 'components/searchFormItem/baseLevel.vue'
    export default {
        name: 'taskUntreated',
        data () {
            return {
                loading:true,
                selectStatus: [
                    {value:'OPEN',label:"未处理"},
                    {value:"PENDING",label:'处理中'},
                    {value:'CLOSED',label:'已完结'}
                ],
                selectResolveCount:[
                    {value:'1',label:"1"},
                    {value:"2",label:'2'},
                    {value:'3',label:'3'}
                ],
                mainQUestionList: ['咨询', '投诉','其他'],
                batchDisabled: true,
                handleBatch: [],
                totalElements:0,
                pageSize:10,
                page:0,
                opts:[10],
                value: '',
                formValidate: {
                    serialNo: '',
                    baseLevel:'',
                    levelOne:'',
                    levelTwo:'',
                    levelFour:'',
                    regTelNum: '',
                    stuId: '',
                    questionType: [],
                    creatorName: '',
                    creatorId: '',
                    status:'',
                    createTime:'',
                },
                ruleValidate:{

                },
                workOrdercolumns1: [
                    {
                        title: '全选',
                        type: 'selection',
                        width: 60,
                        align: 'center',
                        key: 'selectAll',
                    },
                    {
                        title: '工单号',
                        key: 'serialNo',
                        width: 150,
                        render: (h, params) => {
                            return h('div', [
                                h('a', {
                                    props: {
                                        // size: 'small'
                                    },
                                    on: {
                                        click: () => {
                                            let id = params.row.id;
                                            let task_type = '待处理工单'
                                            let newTagObj = {
                                                path: '/taskdetail?id=' + id + '&action_type=taskUntreated',
                                                is_nav: false,
                                                title: task_type + '—工单详情',
                                                name: 'taskdetail_index',
                                                children: []
                                            }

                                            this.$store.dispatch('recordDetailPageTags', newTagObj)
                                            this.$router.push({
                                                path: 'taskdetail',
                                                query: {
                                                    id: id,
                                                    action_type: 'taskUntreated'
                                                }
                                            })
                                        }
                                    }
                                }, params.row.serialNo)
                            ]);
                        }
                        
                    },
                    {
                        title: '问题大类',
                        key: 'baseLevel'
                    },
                    {
                        title: '一级分类',
                        key: 'levelOne',
                    },
                    {
                        title: '二级分类',
                        key: 'levelTwo',
                        
                    },
                    {
                        title: '三级分类',
                        key: 'levelThree'
                        
                    },
                    {
                        title: '四级分类',
                        key: 'levelFour',
                        
                    },
                    {
                        title: '工单状态',
                        key: 'status',
                        align: 'center',
                        render: (h, params) => {
                             return this.Func.getChineseTaskStatus(params.row.status)
                        }
                    },
                    {
                        title: '提单时间',
                        key: 'createTime',
                        width:140,
                        
                    },
                    {
                        title: '创建组',
                        key: 'creatorGroupName',
                        
                    },
                    {
                        title: '创建人',
                        key: 'creatorName',
                        
                    },
                    {
                        title: '工号',
                        key: 'creatorId',
                        
                    },
                    {
                        title: '追单次数',
                        key: 'appendCount',
                        
                    },
                    
                ],
                taskUntreatedListData :[],
                one_list: [],
                two_list:[],
                three_list:[],
                one_object:[],
                two_object:[],
                three_object:[],
                curr_opt_id:'',
                curr_opt_id_two:'',
                curr_opt_id_three:'',
            }
        },
        computed: {
            ...mapGetters({
                loginUserInfo: 'loginUserInfo'
            })
        },
        components: {
            baseLevel
        },
        methods:{
            handleReset (name) {
                this.$refs[name].resetFields();
                this.taskUntreatedList();
            },
            // keySearch(value){
            //     // var _this = this;
            //     // window.onkeydown = function(e){
            //     //     if(e.keyCode === 13);
            //     //     _this.search();
            //     // }
            // },
            // getBaseLevel(value) {
            //     this.formValidate.baseLevel = value;
            //     this.keySearch(value);
            // },
            selectChange: function (data) {
                this.handleBatch = data
            },
            //处理超过工单处理时效的工单 状态 
            rowClassName (row, index) {
                var mark = row.mark;
                if (mark === "ALERT") {
                    return 'task-table-orange-row';
                }
                if(mark === "WARN"){
                    return 'task-table-yellow-row';
                }
                return '';
            },
            //搜索
           async search(page,handlerId){
                this.formValidate.levelOne =this.curr_opt_id.label;
                this.formValidate.levelTwo =this.curr_opt_id_two.label;
                this.formValidate.levelThree =this.curr_opt_id_three.label;
                this.loading = true;
               if(!this.loginUserInfo.curHandlerId){
                    this.loading = false;
                    return false;
                }
                handlerId = this.loginUserInfo.curHandlerId;
                let params = {
                    size:this.pageSize,
                    page:this.page,
                };
                
                if (this.formValidate.serialNo) {
                    Object.assign(params, {
                        'serialNo': this.formValidate.serialNo,
                    })
                }
                if (this.formValidate.baseLevel) {
                    Object.assign(params, {
                        'baseLevel': this.formValidate.baseLevel,
                    })
                }
                if (this.formValidate.levelOne) {
                    Object.assign(params, {
                        'levelOne': this.formValidate.levelOne,
                    })
                }
                if (this.formValidate.levelTwo) {
                    Object.assign(params, {
                        'levelTwo': this.formValidate.levelTwo,
                    })
                }
                if (this.formValidate.levelThree) {
                    Object.assign(params, {
                        'levelThree': this.formValidate.levelThree,
                    })
                }
                if (this.formValidate.status) {
                    Object.assign(params, {
                        'status': this.formValidate.status,
                    })
                }
                if (this.formValidate.createTime[0] && this.formValidate.createTime[1]!= "NaN-aN-aN aN:aN:aN") {
                    Object.assign(params, {
                        'startDateTime': formatDate(this.formValidate.createTime[0], 'yyyy-MM-dd hh:mm:ss'),
                    })
                    // this.keySearch();
                }
                if (this.formValidate.createTime[1] && this.formValidate.createTime[1]!= "NaN-aN-aN aN:aN:aN") {
                    Object.assign(params, {
                        'endDateTime': formatDate(this.formValidate.createTime[1], 'yyyy-MM-dd hh:mm:ss'),
                    })
                    // this.keySearch();
                }
                if (this.formValidate.stuId) {
                    Object.assign(params, {
                        'stuId': this.formValidate.stuId,
                    })
                }
                if(this.formValidate.creatorId){
                    Object.assign(params, {
                        'creatorId': this.formValidate.creatorId
                    }) 
                }
                if(this.formValidate.creatorName){
                    Object.assign(params, {
                        'creatorName': this.formValidate.creatorName
                    }) 
                }
                if (this.formValidate.regTelNum) {
                    Object.assign(params, {
                        'regTelNum': this.formValidate.regTelNum,
                    })
                }
                if (this.formValidate.resolveCount) {
                    Object.assign(params, {
                        'resolveCount': this.formValidate.resolveCount,
                    })
                }               
                let taskdata = await taskService.taskUntreatedList(params,handlerId);
                if(taskdata.state){
                    this.loading = false;
                    this.taskUntreatedListData =taskdata.data.content;
                    this.totalElements =taskdata.data.totalElements;
                }
           },
            async taskUntreatedList (page,handlerId) {
                let _this = this;
                _this.loading = true;
                if(!_this.loginUserInfo.curHandlerId){
                    _this.loading = false;
                    return false;
                }
                handlerId = _this.loginUserInfo.curHandlerId;
                let dataObj ={
                    "page":_this.page,
                    "size":_this.pageSize,
                }
                let taskList = await taskService.taskUntreatedList(dataObj,handlerId);
                if(taskList.state){
                    _this.loading = false;
                    _this.taskUntreatedListData =taskList.data.content;
                    _this.totalElements = taskList.data.totalElements;
                    _this.$store.dispatch('changeuntreatedNum', _this.totalElements);
                }
            },
            changepage(page){
                let vm = this;
                vm.page = parseInt(page-1);
                vm.taskUntreatedList({
                    "page":vm.page,
                    "size":vm.pageSize,
                    "handlerId":vm.loginUserInfo.curHandlerId,
                },page);
               
            },
            changeLevelOne (currObj) {  
                let _this = this;
                if(_this.Func.isNull(currObj.value)  && _this.Func.isNull(currObj.label)){
                    _this.curr_opt_id =currObj;
                    _this.one_list = _this.getList(_this.one_object);
                    _this.search();
                }
                
            },
            changeLevelTwo (currObj) {  
                let _this = this;
                if(_this.Func.isNull(currObj.value)  && _this.Func.isNull(currObj.label)){
                    _this.curr_opt_id_two =currObj;
                    _this.two_list.forEach((x,y) =>{
                        if(_this.curr_opt_id_two.value === x.value){
                            _this.three_object = x.children;
                            _this.three_list = _this.getList(_this.three_object);
                        }
                    })
                    _this.search();
                }
            },
            changeLevelThree (currObj) {  
                let _this = this;
                if(_this.Func.isNull(currObj.value)  && _this.Func.isNull(currObj.label)){
                    _this.curr_opt_id_three =currObj;
                    _this.search();
                }
            },
            async getQuestion() {
                let _this = this;
                let jsondata = await configService.getQuestionTypeList();
                if(!jsondata){
                    return false;
                }
                _this.one_object = jsondata.children;
                _this.one_list = _this.getList(jsondata.children);
            },
            getList(list =[]) {
                let _this = this;
                let oneArray =[];
                if (!!list && list.length !== 0) {
                    list.forEach((item,index) => {
                        let oneObj = {};
                        oneObj.label = item.text;
                        oneObj.value = item.id;
                        oneObj.children = item.children;
                        if(_this.curr_opt_id.value === item.id){ //匹配id
                            _this.two_list = _this.getList(item.children); //递归调用
                            _this.two_object = item.children;
                        };
                        oneArray.push(oneObj);
                    });
                }
                return oneArray;
            }
        },
        created(){
            this.taskUntreatedList();
            this.getQuestion();
        },
        mounted() {
        },
        watch: {
            loginUserInfo(newObj,oldObj) {
                this.taskUntreatedList();
            },
            handleBatch: function(){
                if(this.handleBatch.length === 0){
                    this.batchDisabled = true;
                }else{
                    this.batchDIsabled = false;
                }
            }
        }
    } 
</script>
<style scoped>
    .form {
        width: 100%;
        text-align: left;
    }
    tr.ivu-table-row.task-table-orange-row td {
        background: #f85415;
    }
    tr.ivu-table-row.task-table-yellow-row td {
        background: yellow;
    }
</style>
